<template>
    <div class="module1">
        <header>
            <h2>设备情况</h2>
        </header>
        <div id="chart1"></div>
        <div class="category">
            <div class="item">
                <div style="background-color:#7bcb53"></div>
                <span>在线设备200台</span>
            </div>
            <div class="item">
                <div style="background-color:#2d80e0"></div>
                <span>未上线设备20台</span>
            </div>
            <div class="item">
                <div style="background-color:#8e8e8e"></div>
                <span>离线设备10台</span>
            </div>
            <div class="item">
                <div style="background-color:#fa001f"></div>
                <span>告警设备5台</span>
            </div>
            <div class="item">
                <div style="background-color:#ffd751"></div>
                <span>待建设备50台</span>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name: "module1",
    data() {
        return {
            /* option: {
                color: ["#02C6FF", "#BA7BFB", "#2E63E6", "#D94D7B", "#FFD550"],
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: [60, 100],
                        center: ['50%', '45%'],
                        itemStyle: {
                            borderRadius: 10,
                            borderWidth: 2
                        },
                        // 高亮状态的扇区和标签样式(等同于选中)
                        emphasis: {
                            scale: false,
                            label: {
                                show: false
                            },
                            focus: "none"
                        },
                        labelLine: {
                            show: false
                        },
                        label: {
                            show: false,
                            position: "center",
                            formatter: ` {b}\n\n{c}`
                        },
                        selectedMode: "single",
                        selectedOffset: 10,
                        select: {
                            label: {
                                show: true,
                                color: "#fff",
                                fontSize: 18,
                                fontWeight: "bolder"
                            },
                            itemStyle: {
                            }
                        },
                        data: [
                            {value: 865, name: '在线'},
                            {value: 130, name: "未上线"},
                            {value: 110, name: "离线"},
                            {value: 40, name: "告警"},
                            {value: 160, name: "待建"},
                        ],
                        silent: true,//是否响应鼠标事件，false为响应
                        animation: true,
                    }
                ]
            }, */
            /* option: {
                color: ["#02C6FF", "#BA7BFB", "#2E63E6", "#D94D7B", "#FFD550"],
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: [30, 120],
                        center: ['50%', '45%'],
                        itemStyle: {
                            borderRadius: 10,
                            borderWidth: 2
                        },
                        roseType: "area",
                        // 高亮状态的扇区和标签样式(等同于选中)
                        emphasis: {
                            scale: false,
                            label: {
                                show: false
                            },
                            focus: "none"
                        },
                        labelLine: {
                            show: false
                        },
                        label: {
                            show: false,
                            position: "center",
                            formatter: ` {b}\n\n{c}`
                        },
                        selectedMode: "single",
                        selectedOffset: 10,
                        select: {
                            label: {
                                show: true,
                                color: "#fff",
                                fontSize: 10,
                                fontWeight: "bold"
                            },
                            itemStyle: {
                            }
                        },
                        data: [
                            {value: 865, name: '在线'},
                            {value: 100, name: "未上线"},
                            {value: 110, name: "离线"},
                            {value: 140, name: "告警"},
                            {value: 160, name: "待警"},
                        ],
                        silent: true,//是否响应鼠标事件，false为响应
                        animation: true,
                    }
                ]
            }, */
            option: {
                /* backgroundColor: '#2c343c',

                title: {
                    text: 'Customized Pie',
                    left: 'center',
                    top: 20,
                    textStyle: {
                        color: '#ccc'
                    }
                }, */
                color: ["#7bcb53", "#2d80e0", "#8e8e8e", "#fa001f", "#ffd751"],

                tooltip: {
                    trigger: 'item'
                },
                // 高亮状态的扇区和标签样式(等同于选中)
                emphasis: {
                    scale: false,
                    label: {
                        show: false
                    },
                    focus: "none"
                },
                silent: true,//是否响应鼠标事件，false为响应
                // visualMap: {
                //     show: false,
                //     min: 80,
                //     max: 600,
                //     inRange: {
                //         colorLightness: [0, 1]
                //     }
                // },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '60%',
                        center: ['50%', '38%'],
                        data: [
                            {value: 535, name: '在线'},
                            {value: 410, name: '未上线'},
                            {value: 374, name: '离线'},
                            {value: 300, name: '告警'},
                            {value: 400, name: '待建'}
                    
                        ].sort(function (a, b) { return b.value - a.value; }),
                        roseType: 'area',
                        selectedMode: "single",
                        selectedOffset: 5,
                        label: {
                            color: 'rgba(255, 255, 255, .9)'
                        },
                        labelLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255)'
                            },
                            // smooth: 0.2,
                            // length: 10,
                            // length2: 20
                        },
                        animationType: 'scale',
                        animationEasing: 'elasticOut',
                        animationDelay: function () {
                            return Math.random() * 200;
                        }
                    }
                ]
            },
            selected: 0
        }
    },
    mounted() {
        this.chartLoad()
    },
    methods: {
        chartLoad() {
            let chart = echarts.init(document.getElementById("chart1"));
            chart.setOption(this.option);
            this.changeSelect(chart)
        },
        changeSelect(chartInstance) {
            let {data} = this.option.series[0];
            chartInstance.dispatchAction({
                type: "select",
                seriesIndex: 0,
                name: data[this.selected].name
            });
            this.selected++;
            if(this.selected === data.length) {
                this.selected = 0;
            }
            setTimeout(()=> {
                this.changeSelect(chartInstance)
            } , 3000);
        }
    }
}
</script>

<style scoped>
.module1 {
    height: 100%;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
}
.module1 header {
    padding: 12px 0 12px 36px;
}
.module1 header h2 {
    color: #fff;
    font-size: 18px;
    position: relative;
}
.module1 header h2::after {
    content: "";
    display: block;
    width: 4px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -12px;
    background-color: #02C6FF;
}
.module1 #chart1 {
    flex: 1;
}
.module1 .category {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
}
.module1 .category .item {
    width: calc(100% / 3);
    color: #fff;
    font-size: 12px;
    margin-bottom: 6px;
    text-align: center;
    display: flex;
    align-items: center;
}
.module1 .category .item div {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: 3px;
}
.module1 .category .item span {
    padding-left: 3px;
}
</style>